<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Install Ubuntu</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="<?php echo Yii::app()->baseUrl; ?>/css/bootstrap.min2.css" rel="stylesheet" type="text/css">
        <link href="<?php echo Yii::app()->baseUrl; ?>/css/system_install.css" rel="stylesheet" type="text/css">
        <style>
           
            </style>
        </head>

        <body >

            <nav class="navbar   navbar-inner navbar-form navbar-left " role="navigation">
            <div class="container">
                <ul class="nav  nav-pills ">
                    <li class="active"><a href="#ubuntu" data-toggle="tab">Ubuntu</a></li>
                    <li ><a href="#winXp" data-toggle="tab">WinXP</a></li>
                    <li><a href="#win7" data-toggle="tab">Win7</a></li>
                    <li><a href="#win8" data-toggle="tab">Win8</a></li>
                </ul>
            </div>
        </nav>


        <div class=" tab-content " >


            <div  class="tab-pane  "style="background-image: url(<?php echo Yii::app()->baseUrl; ?>/images/bg6.png)"  id="ubuntu">
                <div class="tabbable tabs-right tabs-stacked">
                    <ul class="nav nav-tabs nav-pills ">
                        <li><div style="color:white;font-size:20px;margin: 5px 5px "><span>Install Ubuntu14.04</span></div></li>
                        <li class="active"><a href="#Ubuntu-1" data-toggle="tab">Step one</a></li>
                        <li><a href="#Ubuntu-2"  data-toggle="tab">StepTwo</a></li>
                        <li><a href="#Ubuntu-3" data-toggle="tab">Step Three</a></li>   
                        <li><a href="#Ubuntu-4" data-toggle="tab">Step four</a></li> 
                        <li><a href="#Ubuntu-5" data-toggle="tab">Step five</a></li> 
                        <li><a href="#Ubuntu-6" data-toggle="tab">Step six</a></li> 
                        <li><a href="#Ubuntu-7" data-toggle="tab">Step seven</a></li> 
                        <li><a href="#Ubuntu-8" data-toggle="tab">Step eight</a></li> 
                        <li><a href="#Ubuntu-9" data-toggle="tab">Step nine</a></li> 
                        <li><a href="#Ubuntu-10" data-toggle="tab">Step ten</a></li> 
                    </ul>

                    <div class="tab-content" style="height: 624px">
                        <div class="tab-pane active container" id="Ubuntu-1">
                            <div> <img usemap="#install-ubuntu" data-toggle="tab" src="images/U-1.png" alt="">
                                <map name="install-ubuntu" id="install-ubuntu">
                                    <!--Button Try Ubuntu-->
                                    <area
                                        shape="rect"
                                        coords="266,316,409,347"
                                        href ="#Ubuntu-10"
                                        onclick="$('[href=#Ubuntu-10]').tab('show')"
                                        target ="_self"
                                        alt="" />
                                    <!--Button Install Ubuntu-->
                                    <area
                                        shape="rect"
                                        coords="639,316,780,348"
                                        href ="#Ubuntu-2"
                                        onclick="$('[href=#Ubuntu-2]').tab('show')"
                                        target ="_self"
                                        alt="" />
                                </map>
                            </div>
                        </div>

                        <div class="tab-pane container relative "id="Ubuntu-2">

                            <div style="margin-left:24px;margin-top:278px;position: absolute">
                                <input type="checkbox"  name="u2-1"></div>
                            <div style="margin-left:24px;margin-top:352px; position: absolute" >
                                <input type="checkbox"  name="u2-2"></div>
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/stepTwo.png"  usemap="#stepTwo"/>
                            <map name="stepTwo" id="stepTwo">
                                <!--Button Quit-->
                                <area
                                    shape="rect"
                                    coords="626,412,717,436"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Button Back-->
                                <area
                                    shape="rect"
                                    coords="727,412,818,436"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Button continue-->
                                <area
                                    shape="rect"
                                    coords="826,412,918,436"
                                    href ="#Ubuntu-3"
                                    onclick="$('[href=#Ubuntu-3]').tab('show')"
                                    target ="_self"
                                    alt="" />
                            </map>

                        </div>


                        <div class="tab-pane container relative" id="Ubuntu-3" >
                            <div style="margin-left:53px;margin-top:145px;position: absolute">
                                <input type="radio"  name="u3-1"></div>
                            <div style="margin-left:53px;margin-top:310px;position: absolute">
                                <input type="radio"  name="u3-1"></div>
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/three.png"  usemap="#stepThree" alt=""/>
                            <map name="stepThree" id="stepThree">
                                <!--Button Quit-->
                                <area
                                    shape="rect"
                                    coords="627,411,717,436"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Button Back-->
                                <area
                                    shape="rect"
                                    coords="728,411,818,436"
                                    href ="#Ubuntu-2"
                                    onclick="$('[href=#Ubuntu-2]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Button continue-->
                                <area
                                    shape="rect"
                                    coords="827,411,918,436"
                                    href ="#Ubuntu-4"
                                    onclick="$('[href=#Ubuntu-4]').tab('show')"
                                    target ="_self"
                                    alt="" />
                            </map>

                        </div>

                        <div class="tab-pane container relative" id="Ubuntu-4">

                            <div  class="container" style="margin-left:22px;margin-top:424.5px;position: absolute;">
                                <select class="form-control"width="895" style="width:895px;">
                                    <option>/dev/sda ATA VOBX HARDDISK(8.6GB)</option>
                                </select>
                            </div>

                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/four-1.png" usemap="#stepFour" alt=""/>
                            <map name="stepFour" id="stepFour">
                                <!-- + -->
                                <area
                                    shape="rect"
                                    coords="22,367,46,391"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!-- - -->
                                <area
                                    shape="rect"
                                    coords="47,367,72,391"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!--change-->
                                <area
                                    shape="rect"
                                    coords="71,366,137,391"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--/dev/sda -->
                                <area
                                    shape="rect"
                                    coords="23,147,918,168"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--New Partition Table-->
                                <area
                                    shape="rect"
                                    coords="710,367,861,391"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--Revert-->
                                <area 
                                    shape="rect"
                                    coords="864,367,917,391"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--Quit-->
                                <area 
                                    shape="rect"
                                    coords="627,476,717,502"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Back-->
                                <area 
                                    shape="rect"
                                    coords="726,476,817,502"
                                    href ="#Ubuntu-3"
                                    onclick="$('[href=#Ubuntu-3]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Install Now-->
                                <area 
                                    shape="rect"
                                    coords="827,476,917,502"
                                    href ="#Ubuntu-5"
                                    onclick="$('[href=#Ubuntu-5]').tab('show')"
                                    target ="_self"
                                    alt="" />

                            </map>
                        </div>

                        <div class="tab-pane container" id="Ubuntu-5">
                            <div style="margin-left:21px;margin-top:426px;position: absolute;">
                                <select class="form-control"width="895" style="width:895px;">
                                    <option>/dev/sda ATA VOBX HARDDISK(8.6GB)</option>
                                </select>
                            </div>
                            <img src="images/five.png" usemap="#stepFive" alt=""/>
                            <map name="stepFive" id="stepFive">
                                <!-- + -->
                                <area
                                    shape="rect"
                                    coords="22,369,46,393"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!-- - -->
                                <area
                                    shape="rect"
                                    coords="46,369,70,393"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!--change-->
                                <area
                                    shape="rect"
                                    coords="70,369,138,393"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--freespace -->
                                <area
                                    shape="rect"
                                    coords="21,194,918,215"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--New Partition Table-->
                                <area
                                    shape="rect"
                                    coords="710,368,861,393"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--Revert-->
                                <area 
                                    shape="rect"
                                    coords="864,367,917,392"
                                    href ="#Ubuntu-4"
                                    onclick="$('[href=#Ubuntu-4]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Quit-->
                                <area 
                                    shape="rect"
                                    coords="627,477,717,502"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Back-->
                                <area 
                                    shape="rect"
                                    coords="726,477,816,502"
                                    href ="#Ubuntu-4"
                                    onclick="$('[href=#Ubuntu-4]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Install Now-->
                                <area 
                                    shape="rect"
                                    coords="826,477,916,502"
                                    href ="#Ubuntu-6"
                                    onclick="$('[href=#Ubuntu-6]').tab('show')"
                                    target ="_self"
                                    alt="" />

                            </map>
                        </div>

                        <div class="tab-pane container" id="Ubuntu-6">
                            <div style="margin-left:22px;margin-top:426px;position: absolute;">
                                <select class="form-control"width="895" style="width:895px;">
                                    <option>/dev/sda ATA VOBX HARDDISK(8.6GB)</option>
                                </select>
                            </div>
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/finish.png" usemap="#stepSix" alt=""/>
                            <map name="stepSix" id="stepSix">
                                <!-- + -->
                                <area
                                    shape="rect"
                                    coords="22,369,46,393"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!-- - -->
                                <area
                                    shape="rect"
                                    coords="46,369,70,393"
                                    href ="#ubuntu-4"
                                    target ="_self"
                                    alt="" />
                                <!--change-->
                                <area
                                    shape="rect"
                                    coords="70,369,138,393"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--freespace -->
                                <area
                                    shape="rect"
                                    coords="21,194,918,215"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--New Partition Table-->
                                <area
                                    shape="rect"
                                    coords="711,368,861,393"
                                    href ="#ubuntu"
                                    target ="_self"
                                    alt="" />
                                <!--Revert-->
                                <area 
                                    shape="rect"
                                    coords="864,367,917,392"
                                    href ="#Ubuntu-4"
                                    onclick="$('[href=#Ubuntu-4]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Quit-->
                                <area 
                                    shape="rect"
                                    coords="627,477,717,502"
                                    href ="#Ubuntu-1"
                                    onclick="$('[href=#Ubuntu-1]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Back-->
                                <area 
                                    shape="rect"
                                    coords="726,477,817,502"
                                    href ="#Ubuntu-5"
                                    onclick="$('[href=#Ubuntu-5]').tab('show')"
                                    target ="_self"
                                    alt="" />
                                <!--Install Now-->
                                <area 
                                    shape="rect"
                                    coords="826,477,917,502"
                                    href ="#Ubuntu-4"
                                    onclick="$('[href=#Ubuntu-7]').tab('show')"
                                    target ="_self"
                                    alt="" />

                            </map>
                        </div>
                        <div class="tab-pane container" id="Ubuntu-7">
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/where-are-you.png" usemap="#stepSeven" alt=""/>
                            <map name="stepSeven" id="stepSeven">
                                <!--continue-->
                                <area 
                                    shape="rect"
                                    coords="827,477,918,502"
                                    href ="#Ubuntu-8"
                                    onclick="$('[href=#Ubuntu-8]').tab('show')"
                                    target ="_self"
                                    alt="" /> 
                                <!--Install Now-->

                            </map>
                        </div>


                        <div class="tab-pane container" id="Ubuntu-8">
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/keyboard-layout.png" usemap="stepEight" alt=""/>
                            <map name="stepEight" id="stepEight">
                                <!--continue-->
                                <area 
                                    shape="rect"
                                    coords="827,477,917,502"
                                    href ="#Ubuntu-9"
                                    onclick="$('[href=#Ubuntu-9]').tab('show')"
                                    target ="_self"
                                    alt="" /> 
                                <!--back-->
                                <area 
                                    shape="rect"
                                    coords="726,477,816,502"
                                    href ="#Ubuntu-7"
                                    onclick="$('[href=#Ubuntu-7]').tab('show')"
                                    target ="_self"
                                    alt="" />
                            </map>
                        </div>


                        <div class="tab-pane container" style="postion:relative;"id="Ubuntu-9">
                            <div style="margin-top:113px;">
                                <input type="text" class="span6" id="name"></div>
                            <div style="margin-top:146px;">
                                <input type="text" class="span3" id="pc-name"></div>
                            <div style="margin-top:200px;">
                                <input type="text" class="span2" id="user-name"></div>
                            <div style="margin-top:233px;">
                                <input type="password" class="span3" id="password"></div>
                            <div style="margin-top:265px;">
                                <input type="password" class="span3" id="con-password"></div>
                            <div style="margin-top:300px; margin-left:392px">
                                <input type="radio"  name="login-model"></div>
                            <div style="margin-top:325px;margin-left:392px">
                                <input type="radio"  name="login-model"></div>
                            <div style="margin-top:352px;margin-left:416px">
                                <input type="checkbox"  name="login-model"></div>
                            <div style="margin-top:475px;margin-left:827px">

                                <img src="<?php echo Yii::app()->baseUrl; ?>/images/button-continue.png"usemap="#stepNine-1" alt=""/>
                                <map name="stepNine-1" id="stepNine-1">
                                    <!--continue-->
                                    <area 
                                        shape="rect"
                                        coords="2,2,93,27"
                                        href ="#Ubuntu-10"
                                        onclick="$('[href=#Ubuntu-10]').tab('show')"
                                        target ="_self"
                                        alt="" /> 
                                </map></div>
                            <img src="<?php echo Yii::app()->baseUrl; ?>/images/who-are-you.png" usemap="#stepNine" alt=""/>


                            <map name="stepNine" id="stepNine">
                                <!--continue-->
                                <area 
                                    shape="rect"
                                    coords="827,477,917,502"
                                    href ="#Ubuntu-10"
                                    onclick="$('[href=#Ubuntu-10]').tab('show')"
                                    target ="_self"
                                    alt="" /> 
                                <!--back-->
                                <area 
                                    shape="rect"
                                    coords="727,477,818,502"
                                    href ="#Ubuntu-7"
                                    onclick="$('[href=#Ubuntu-7]').tab('show')"
                                    target ="_self"
                                    alt="" />       
                            </map>
                        </div>

                        <div class="tab-pane container" id="Ubuntu-10">

                            <div id="introduce" class="carousel slide" style="width: 752px;margin: auto">
                                <div class="carousel-inner  container">
                                    <div class="item active" >
                                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/welcome.png" alt=""/>
                                    </div>
                                    <div class="item">
                                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/make-the-most-of-the-web.png" alt=""/>
                                    </div>
                                    <div class="item">
                                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/have-fun-with-your-photo.png" alt=""/>
                                    </div>
                                    <div class="item">
                                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/find-even-more-software.png" alt=""/>
                                    </div>
                                    <div class="item">
                                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/take-your-music-with-you.png" alt=""/>
                                    </div>
                                </div>
                                <a class="left carousel-control" style="width:20px;top:54%;opacity:0;left:0px" href="#introduce" data-slide="prev">‹</a>
                                <a class="right carousel-control" style="width:20px;top:54%;opacity:0;right:0px" href="#introduce" data-slide="next">›</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane " id="winXp" ><?php include "winXP.php"; ?></div>
            <div class="tab-pane active" id="win7" style="background-color: #0066A4;height:600px">
                <?php include "win7.php"; ?>
            </div>
            <div class="tab-pane " id="win8" >win8 content</div>
        </div>
        <!--<script src="?php // echo Yii::app()->baseUrl;  ?>/assets/js/system_install.js" ></script>-->
        <script src="<?php echo Yii::app()->baseUrl; ?>/assets/js/jquery-1.9.1.js"></script> 
        <script src="<?php echo Yii::app()->baseUrl; ?>/assets/js/bootstrap.min.js"></script>
    </body>
</html>